﻿@model ListCommentModel
@using Nop.Web.Models.WindAlert
@{
    //we use forum post javascript
    Html.AddScriptParts("~/Scripts/jquery.magnific-popup.js");
    Html.AddCssFileParts("~/Content/magnific-popup/magnific-popup.css");
    int i = 0;
}

<script>
    $(function () {
        $('#spot-comments').easyTicker({
            direction: 'up',
            visible: 3,
            interval: 2500,
            controls: {
                up: '#forum-last-btnUp',
                down: '#forum-last-btnDown',
            }
        });
    });
</script>

<div class="panel panel-default form-panel">
    <div class="panel-heading">
        <strong>@String.Format(T("windalert.spot.Comments.count").Text, Model.Comments.Count)</strong>
        @if (Model.IsAuthenticated)
        {
            <a href="@Url.RouteUrl("SpotComments")" class="btn btn-danger btn-xs pull-right">@T("Windalert.Spot.Comments.Report")</a>
        }
        else
        {
            <a href="#" onclick="alert('@T("blog.comments.onlyregisteredusersleavecomments")')" class=" btn btn-danger btn-xs pull-right">@T("Windalert.Spot.Comments.Report")</a>
        }

    </div>
    <div class="panel-body">
        @if (Model.Comments.Count > 0)
        {
            <div id="spot-comments" class="forum-last">
                <ul>
                    @foreach (var comment in Model.Comments)
                    {
                        i++;
                        <li>
                            <a href="@Url.RouteUrl("SpotComments")"><strong>@i @comment.SpotName</strong> - <small>@comment.CreatedOn.ToString("HHH:mm")</small></a>
                            <div class="row topic-title">
                                <div class="col-md-9">
                                    <small>@Html.Raw(Nop.Core.Html.HtmlHelper.FormatText(comment.CommentText, false, true, false, false, false, false))</small>
                                </div>
                                <div class="col-md-3">
                                    @if (comment.PictureUrl != null)
                                    {
                                        <a href="@comment.PictureUrlFullSize" id="main-product-img-lightbox-anchor-@comment.Id">
                                            <img src="@(comment.PictureUrl)" />
                                        </a>
                                        <script type="text/javascript">
                                            $(document).ready(function () {
                                                $('#main-product-img-lightbox-anchor-@comment.Id').magnificPopup(
                                                {
                                                    type: 'image',
                                                    removalDelay: 300,
                                                    gallery: {
                                                        enabled: true
                                                    }
                                                });
                                            });
                                        </script>
                                    }
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12 topic-com">
                                    @if (comment.CustomerId > 0)
                                    {
                                        <label>@T("Forum.Author"):</label>
                                        if (comment.AllowViewingProfiles)
                                        {
                                            @Html.RouteLink(comment.CustomerName, "CustomerProfile", new { Id = comment.CustomerId })
                                        }
                                        else
                                        {
                                            @comment.CustomerName
                                        }
                                    }
                                </div>
                            </div>
                        </li>
                    }
                </ul>
            </div>
        }
    </div>
</div>

